<template>
  <div class="app-container">
    <div class="search-bar">
      <search-bar :search="searchParams" @on-search="search">
        <el-form
          inline
          label-position="right"
          :model="searchParams"
          class="search-form-inline"
          label-width="70px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="采购单号">
                <el-input
                  v-model="searchParams.purchaseNo"
                  placeholder="采购单号"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商">
                <el-input
                  v-model="searchParams.supplierName"
                  placeholder="供应商名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态">
                <el-select
                  v-model="searchParams.status"
                  placeholder="状态"
                  clearable
                >
                 <el-option v-for="item in purchaseOrderStatus" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </search-bar>
    </div>
    <div class="tb-main">
      <Table-header createBtnText="新建采购单" @create="createDialog"/>
      <page-table
        :WP_MaxHeight="370"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column
          label="采购单号"
          prop="purchaseNo"
          width="100"
          fixed
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="showDialog(scope.row)">{{
              scope.row.purchaseNo
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="供应商名称"
          width="150"
          prop="supplierName"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="状态" prop="statusName"> </el-table-column>
        <el-table-column label="采购实际金额" prop="purchaseActualAmount">
        <template slot="header">
            <div class="wp-table-header__tooltip">
              <el-tooltip
content="采购实际金额" placement="top" ><span>采购实际金额</span></el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="采购金额" prop="purchaseAmount">
          <template slot="header">
            <div class="wp-table-header__tooltip">
              <el-tooltip
content="采购金额" placement="top"
                ><span>采购金额</span></el-tooltip
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          prop="remark"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="采购日期"
          prop="purchaseDate"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.purchaseDate | FormatDate('yyyy-MM-dd') }}</span>
        </template>
        </el-table-column>
        <el-table-column label="负责人" prop="chargePersonName"></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          show-overflow-tooltip
        ></el-table-column>
      </page-table>
    </div>
    <Create-panel  ref="CreatePanel" :height="400"/>
    <Detail-panel  ref="DetailPanel"/>
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import TableHeader from './components/TableHeader'
import CreatePanel from './components/CreatePanel'
import DetailPanel from './components/DetailPanel'
import Mixins from './mixins'
export default {
  components: { SearchBar, TableHeader, PageTable, CreatePanel, DetailPanel },
  mixins: [Mixins],
  data () {
    return {
      id: 'order',
      DPKey: 1
    }
  },
  computed: {
    purchaseOrderStatus () {
      return [ {value: 0, label: '未提交'}, {value: 1, label: '已提交'}, {value: 2, label: '已驳回'}, {value: 3, label: '订单完成'}, {value: -1, label: '已作废'} ]
    }
  },
  methods: {
    createDialog (text) {
      this.$refs.CreatePanel.open(text)
    },
    showDialog (row) {
      this.$refs.DetailPanel.open({ ...row })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
